<template>
    <div id="app">
        <nav>
            <b-nav tabs justified>
                <b-nav-item
                    @click="goIntroduction()"
                    :class="{ actived: activeArr[0] }"
                >
                    基本信息
                </b-nav-item>

                <b-nav-item
                    @click="goMessages()"
                    :class="{ actived: activeArr[1] }"
                >
                    留言板
                </b-nav-item>

                <!-- <b-nav-item
                    @click="goRegister()"
                    :class="{ actived: activeArr[3] }"
                >
                    <span>
                        注册
                    </span> 
                 </b-nav-item> -->
            </b-nav>
        </nav>

        <transition :name="transitionName">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>

        <footer id="mainApp">
            <p v-html="footer"></p>
        </footer>
    </div>
</template>

<script>
    // console.log(new Date().toLocaleString());
    export default {
        data() {
            return {
                // actived: true,
                transitionName: "transitionLeft",
                flag: false,
                arr: ["introduction", "messages", ""],
                pathArr: ["/", "/introduction", "/messages", ""],
                titleArr: ["王振的个人主页", "王振的个人主页", "留言板"],
                activeArr: [false, false, false, false],
                footer: ` 联系我： <a href="mailto:kill370354@qq.com">kill370354@qq.com</a>`
                // classObject: { "active-class": (console.log(this), "d") }
            };
        },
        created() {
            document.title = this.$data.titleArr[0];
            // console.log(this.$route, this.$router);
            if (this.$route.name == "root") {
                this.$data.activeArr[0] = true;
                return;
            }
            for (let i = this.$data.arr.length - 2; i > -1; i--) {
                if (this.$route.name === this.$data.arr[i]) {
                    this.$data.activeArr[i] = true;

                    break;
                }
            }
            // console.log(this.$data.activeArr);
            //this.flag = this.arr.indexOf(this.$route.path) === "-1" ? false : true;
        },
        mounted() {},
        methods: {
            // addActive() {},
            goBack() {
                // 点击后退
                this.$router.go(-1);
            },
            goIntroduction() {
                this.$data.activeArr = [false, false, false, false];
                this.$data.activeArr[0] = true;
                this.$router.push({ path: "/introduction" });
            },
            goMessages() {
                this.$data.activeArr = [false, false, false, false];
                this.$data.activeArr[1] = true;
                this.$router.push({ path: "/messages" });
            },
            goLogin() {
                this.$data.activeArr = [false, false, false, false];
                this.$data.activeArr[2] = true;
                this.$router.push({ path: "/home/first" });
            }
        },
        computed: {},
        watch: {
            $route(to, from) {
                let toTndex = this.pathArr.indexOf(to.path);
                let fromTndex = this.pathArr.indexOf(from.path);
                // console.log(fromTndex, from.path, toTndex, to.path);
                // this.$data.activeArr[fromTndex] = false;
                // this.$data.activeArr[toTndex] = true;
                // console.log(this);
                // console.log(this.$data.activeArr);
                if (toTndex === -1) {
                    this.pathArr.push(to.path);
                    toTndex = this.pathArr.length - 1;
                } else if (fromTndex === this.pathArr.length - 1) {
                    this.pathArr.pop(fromTndex);
                } else {
                    document.title = this.$data.titleArr[toTndex];
                }
                const compare = toTndex > fromTndex;
                this.transitionName = compare
                    ? "transitionRight"
                    : "transitionLeft";
            },

            "$route.path": function(newVal) {
                if (this.pathArr.indexOf(newVal) < 5) {
                    //newVal === "/home") {
                    this.flag = false;
                } else {
                    this.flag = true;
                }
            },

            beforeRouteUpdate(to, from, next) {
                console.log(to, from, isBack);
                //     let isBack = this.$router.isBack;
                //     if (isBack) {
                //         this.transitionName = "transitionRight";
                //     } else {
                //         this.transitionName = "transitionLeft";
                //     }
                //     this.$router.isBack = false;
            }
        }
    };
</script>

<style lang="scss">
@media only screen and (min-width: 280px) {
    html {
        font-size: 125% !important;
    }
}
@media only screen and (min-width: 750px) {
    html {
        font-size: 150% !important;
    }
}
@media only screen and (min-width: 1242px) {
    html {
        font-size: 187.5% !important;
    }
}
.nav-item {
    transition: all 0.5s ease;
    background-color: floralwhite;
}
.nav-tabs .nav-link {
    display: block;
    padding-left: 0;
    padding-right: 0;
    text-align: center // height: 100%;
        a {
        text-decoration: none;
    }
    .active:hover {
        color: #fff;
    }
}

.nav-item.actived {
    color: #ffffff;
    background-color: rgb(204, 232, 207);

    border-radius: 5px;

    display: block;
}
nav {
    top: 0px;
    position: sticky;
    background-color: #fff;
    z-index: 1;
}
footer#mainApp {
    font-size: 0.8rem;
    text-align: center;
    border-top: 10px groove skyblue;
    // flex:none;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    touch-action: auto;
}

.transitionRight-enter {
    opacity: 0;
    top: 2.5rem;
    transform: translateX(100%);
    position: absolute;
}

.transitionRight-leave-to {
    opacity: 0;
    top: 2.5rem;
    transform: translateX(-100%);
    position: absolute;
}

.transitionRight-enter-active,
.transitionRight-leave-active,
.transitionLeft-enter-active,
.transitionLeft-leave-active {
    top: 2.5rem;
    transition: all 0.5s ease;
    position: absolute;
}

.transitionLeft-enter {
    opacity: 0;
    top: 2.5rem;
    position: absolute;
    transform: translateX(-100%);
}

.transitionLeft-leave-to {
    top: 2.5rem;
    opacity: 0;
    transform: translateX(100%);
    position: absolute;
}
</style>
